<template>
  <div id="myChart" :style="{width: '100%', height: '490px'}"></div>
</template>

<script>
  import * as echarts from 'echarts'
  import {statistics} from '@/api/send'
  export default {
    name: "Statistics",
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        val:[],
        name:[],
      }
    },
    mounted(){
      statistics().then(res=>{
        console.log(res)
        console.log(res.data)
        let arr = res.data;
        this.val = arr.map(e=>e.cnt);
        this.name = arr.map(e=>e.name);
        console.log(this.name)
        console.log(this.val)

        this.$nextTick(function() {
          this.drawLine();
        })
      })


    },
    methods: {
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: { text: '专业就业人数统计' },
          tooltip: {},
          xAxis: {
            data: this.name
          },
          yAxis: {},
          series: [{
            name: '职位',
            type: 'bar',
            data: this.val
          }]
        });
      }
    }
  }
</script>

<style scoped>

</style>